<template>
    <div class="app">
        <!-- 这里是nav -->
        <my-nav></my-nav>
        <!-- 这里是头部 -->
        <my-head></my-head>

        <div class="content">
            <div class="friend">
                <div class="head">
                    <label tabindex="0" class="btn btn-ghost btn-circle avatar" style="margin-top: 10px;margin-left:20px">
                        <div class="w-10 rounded-full">
                            <img :src="head" />
                        </div>
                    </label>

                    <div class="name" style="margin-top: -38px;margin-left:80px;font-weight:bolder">
                        #Admin
                    </div>

                    <div class="indicator" style="margin-left:240px">
                        <span class="indicator-item badge badge-secondary"
                            style="margin-left:200px;margin-top:-30px">99+</span>
                    </div>
                </div>

                <input type="text" placeholder="搜索用户" class="input input-bordered input-error w-full max-w-xs"
                    style="width: 260px;margin-left:15px;margin-top:10px;margin-bottom:15px" />

                <br>
                <a style="color: #97A3B6;font-size:12px;margin-top:40px;font-weight:bolder;margin-left:20px">用户列表</a>

                <div class="overflow-x-auto w-full" style="width: 90%;">
                    <table class="table w-full">
                        <!-- head -->
                        <tbody>
                            <!-- row 1 -->
                            <tr class="hover">
                                <td>
                                    <div class="flex items-center space-x-3">
                                        <div class="avatar">
                                            <div class="mask mask-squircle w-12 h-12">
                                                <img src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg"
                                                    alt="Avatar Tailwind CSS Component" />
                                            </div>
                                        </div>
                                        <div>
                                            <div class="font-bold">Hart Hagerty</div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <!-- row 2 -->
                            <tr class="hover">
                                <td>
                                    <div class="flex items-center space-x-3">
                                        <div class="avatar">
                                            <div class="mask mask-squircle w-12 h-12">
                                                <img src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg"
                                                    alt="Avatar Tailwind CSS Component" />
                                            </div>
                                        </div>
                                        <div>
                                            <div class="font-bold">Brice Swyre</div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <tr class="hover">
                                <td>
                                    <div class="flex items-center space-x-3">
                                        <div class="avatar">
                                            <div class="mask mask-squircle w-12 h-12">
                                                <img src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg"
                                                    alt="Avatar Tailwind CSS Component" />
                                            </div>
                                        </div>
                                        <div>
                                            <div class="font-bold">Brice Swyre</div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <tr class="hover">
                                <td>
                                    <div class="flex items-center space-x-3">
                                        <div class="avatar">
                                            <div class="mask mask-squircle w-12 h-12">
                                                <img src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg"
                                                    alt="Avatar Tailwind CSS Component" />
                                            </div>
                                        </div>
                                        <div>
                                            <div class="font-bold">Brice Swyre</div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <tr class="hover">
                                <td>
                                    <div class="flex items-center space-x-3">
                                        <div class="avatar">
                                            <div class="mask mask-squircle w-12 h-12">
                                                <img src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg"
                                                    alt="Avatar Tailwind CSS Component" />
                                            </div>
                                        </div>
                                        <div>
                                            <div class="font-bold">Brice Swyre</div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <tr class="hover">
                                <td>
                                    <div class="flex items-center space-x-3">
                                        <div class="avatar">
                                            <div class="mask mask-squircle w-12 h-12">
                                                <img src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg"
                                                    alt="Avatar Tailwind CSS Component" />
                                            </div>
                                        </div>
                                        <div>
                                            <div class="font-bold">Brice Swyre</div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <tr class="hover">
                                <td>
                                    <div class="flex items-center space-x-3">
                                        <div class="avatar">
                                            <div class="mask mask-squircle w-12 h-12">
                                                <img src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg"
                                                    alt="Avatar Tailwind CSS Component" />
                                            </div>
                                        </div>
                                        <div>
                                            <div class="font-bold">Brice Swyre</div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <tr class="hover">
                                <td>
                                    <div class="flex items-center space-x-3">
                                        <div class="avatar">
                                            <div class="mask mask-squircle w-12 h-12">
                                                <img src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg"
                                                    alt="Avatar Tailwind CSS Component" />
                                            </div>
                                        </div>
                                        <div>
                                            <div class="font-bold">Brice Swyre</div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <tr class="hover">
                                <td>
                                    <div class="flex items-center space-x-3">
                                        <div class="avatar">
                                            <div class="mask mask-squircle w-12 h-12">
                                                <img src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg"
                                                    alt="Avatar Tailwind CSS Component" />
                                            </div>
                                        </div>
                                        <div>
                                            <div class="font-bold">Brice Swyre</div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <tr class="hover">
                                <td>
                                    <div class="flex items-center space-x-3">
                                        <div class="avatar">
                                            <div class="mask mask-squircle w-12 h-12">
                                                <img src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg"
                                                    alt="Avatar Tailwind CSS Component" />
                                            </div>
                                        </div>
                                        <div>
                                            <div class="font-bold">Brice Swyre</div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>



            <div class="chat">
                <div class="head">
                    <div class="avatar-group -space-x-6" style="margin-top:5px;margin-left:20px">
                        <div class="avatar">
                            <div class="w-12">
                                <img src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" />
                            </div>
                        </div>
                        <div class="avatar">
                            <div class="w-12">
                                <img src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" />
                            </div>
                        </div>
                    </div>

                    <div class="flex-1" style="margin-top: -50px;margin-left:300px">
                        <a class="btn btn-ghost normal-case text-xl">2476358005@qq.com</a>
                    </div>
                </div>

                <div class="body" style="overflow: auto; background-color: #F2F5F9;" ref="body">
                    <a v-for="(message, index) in  messages " :key="index">
                        <div class="she" style="margin-top: 20px;margin-left:15px" v-if="message.from_id != id">
                            <!-- 判断是发送图片 还是信息 -->
                            <a v-if="!message.content.startsWith('data')">
                                <label tabindex="0" class="btn btn-ghost btn-circle avatar">
                                    <div class="w-10 rounded-full">
                                        <img :src="head" />
                                    </div>
                                </label>
                                <div class="chat-bubble chat-bubble-secondary"
                                    style="margin-top:-50px;margin-left:58px;max-height:200px;">{{ message.content }}</div>
                                <div class="chat-footer opacity-50" style="margin-top:0px;margin-left:60px">
                                    {{ message.time }}
                                </div>
                            </a>

                            <a v-else>
                                <div class="she" style="margin-top: 20px;margin-left:15px">
                                    <label tabindex="0" class="btn btn-ghost btn-circle avatar">
                                        <div class="w-10 rounded-full">
                                            <img :src="head" />
                                        </div>
                                    </label>
                                    <div style="margin-top:-50px;margin-left:58px;max-height:200px;"><img
                                            :src="message.content" style="width: 100px;"></div>
                                    <div class="chat-footer opacity-50" style="margin-top:0px;margin-left:60px">
                                        {{ message.time }}
                                    </div>
                                </div>
                            </a>
                        </div>


                        <div class="me" style="margin-top: 20px;margin-right:15px;text-align:right;" v-else>
                            <a v-if="!message.content.startsWith('data')">
                                <label tabindex="0" class="btn btn-ghost btn-circle avatar"
                                    style="float: right;margin-left:8px">
                                    <div class="w-10 rounded-full">
                                        <img :src="head" />
                                    </div>
                                </label>
                                <div class="chat-bubble chat-bubble-primary" style="float:right">
                                    {{ message.content }}</div>
                                <div class="chat-footer opacity-50"
                                    style="margin-top:0px;margin-right:10px;clear:both;margin-right:55px">
                                    {{ message.time }}
                                </div>
                            </a>

                            <a v-else>
                                <div class="me" style="margin-top: 20px;margin-right:15px;text-align:right;">
                                    <label tabindex="0" class="btn btn-ghost btn-circle avatar"
                                        style="float: right;margin-left:8px">
                                        <div class="w-10 rounded-full">
                                            <img :src="head" />
                                        </div>
                                    </label>
                                    <div style="float:right">
                                        <img :src="message.content" style="width: 100px;">
                                    </div>
                                    <div class="chat-footer opacity-50"
                                        style="margin-top:0px;margin-right:10px;clear:both;margin-right:55px">
                                        {{ message.time }}
                                    </div>
                                </div>
                            </a>
                        </div>
                    </a>
                </div>
                <div class="data" style="border-radius: 0px;">
                    <label for="my-modal" class="btn" style="margin-top: 5px;float:left">图片</label>

                    <input type="checkbox" id="my-modal" class="modal-toggle" />
                    <div class="modal">
                        <div class="modal-box">
                            <h3 class="font-bold text-lg">选择上传的图片</h3>
                            <p class="py-4"><input type="file" class="file-input file-input-bordered w-full max-w-xs"
                                    style="margin-left:60px;" @change="onFileChange" /></p>
                            <div class="modal-action">
                                <label for="my-modal" class="btn" @click="clearFile">取消</label>
                                <label for="my-modal" class="btn" @click="sendImages">确定</label>
                            </div>
                        </div>
                    </div>

                    <input type="text" v-model="message" placeholder="message" @keyup.enter="sendMessage"
                        style="width: 680px;margin-left:70px;margin-top:-42px;float:left; background-color: #F2F5F9;height:40px;border-radius: 4px;padding-left:20px" />

                    <button class="btn" style=";float:left;margin-left:770px;margin-top:-46px"
                        @click="sendMessage">Send</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import MyHead from "../../components/head.vue"
import MyNav from "../../components/nav.vue"
export default {
    name: "chat",
    data() {
        return {
            head: "https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg",
            socket: null, //socket连接信息
            id: "123",//假设管理端的ID是admin
            message: '', //存储消息
            messages: [], //存储所有消息 包括接受的消息
            selectedFile: '', //存储图片信息
            groupedMessages: {} // add this line to initialize groupedMessages
        }
    },
    created() {
        this.socket = new WebSocket('ws://localhost:9999/ws?id=' + this.id);
        this.socket.onmessage = event => {
            let data = JSON.parse(event.data);
            this.messages.push(data);
            this.groupMessagesByFromId();
            console.log(this.messages);
            this.scrollToBottom();
        };
    },
    components: {
        'my-head': MyHead,
        'my-nav': MyNav,
    },
    methods: {
        sendMessage() {
            if (this.message.trim() !== '' && this.socket.readyState === WebSocket.OPEN) {
                let msg = {
                    from_id: this.id,
                    to_id: 'admin',
                    content: this.message,
                    isRead: true, //是否查看
                    time: new Date().toLocaleTimeString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true })
                };
                this.messages.push(msg);
                this.socket.send(JSON.stringify(msg));
                this.message = '';
                this.scrollToBottom();
            }
        },
        sendImages() {
            if (this.selectedFile.trim() !== '' && this.socket.readyState === WebSocket.OPEN) {
                let msg = {
                    from_id: this.id,
                    to_id: 'admin',
                    content: this.selectedFile,
                    isRead: true, //是否查看
                    time: new Date().toLocaleTimeString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true })
                };
                this.messages.push(msg);
                this.socket.send(JSON.stringify(msg));
                this.selectedFile = '';
                this.scrollToBottom();
            }
        },
        groupMessagesByFromId() {
            const groupedMessages = {};
            this.messages.forEach(message => {
                if (message.from_id !== 'admin') {
                    const key = message.from_id;
                    if (!groupedMessages[key]) {
                        groupedMessages[key] = [];
                    }
                    groupedMessages[key].push(message);
                } else if (message.to_id !== 'admin') {
                    const key = message.to_id;
                    if (!groupedMessages[key]) {
                        groupedMessages[key] = [];
                    }
                    groupedMessages[key].push(message);
                }
            });
            console.log(groupedMessages); // This will log the messages grouped by the from_id and to_id
        },
        scrollToBottom() {
            this.$nextTick(() => {
                this.$refs.body.scrollTop = this.$refs.body.scrollHeight;
            });
        },
        onFileChange(e) {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = (e) => {
                    console.log(e.target.result);
                    this.selectedFile = e.target.result;

                };
                reader.readAsDataURL(file);
            }
        },
        clearFile() {
            this.selectedFile = '';
        },
    }
}
</script>

<style scoped>
* {
    -webkit-user-select: none;
    /*webkit浏览器*/
    -khtml-user-select: none;
    /*早期浏览器*/
    -moz-user-select: none;
    /*火狐*/
    -ms-user-select: none;
    /*IE10*/
    user-select: none;
}

.content {
    width: 85%;
    height: 100vh;
    margin-left: 15.6%;
    overflow: auto;
    border: 1px solid #E3E8EF;
}

.friend {
    margin-top: 10vh;
    border-bottom: 1px solid #E3E8EF;
    border-right: 1px solid #E3E8EF;
    width: 25%;
    height: 90vh;
    float: left;
    overflow: auto;
}

.friend .head {
    width: 100%;
    height: 70px;
    border-bottom: 1px solid #E3E8EF;
    border-top: 1px solid #E3E8EF;
}

.chat {
    margin-top: 10vh;
    border-bottom: 1px solid #E3E8EF;
    width: 75%;
    height: 90vh;
    float: right;
}

.chat .head {
    width: 203%;
    height: 70px;
    border-bottom: 1px solid #E3E8EF;
    border-top: 1px solid #E3E8EF;
    margin-top: -4px;
}

.body {
    width: 202%;
    height: 74vh;
    border: 1px solid #E3E8EF;
    margin-top: 66px;
    margin-left: -444px;
}

.input {
    border: 1px solid #E3E8EF;
    width: 202%;
}
</style>